<template>
  <view class="order_state_con">
    <!-- 维修报告 -->
    <view class="content">
      <view class="report">维修报告</view>
      <view class="report-list">
        <view class="">维修完成</view>
        <view class="inspect" @click="godetail(record)">点击查看></view>
      </view>
      <view class="report-list"><view class="date">2020-03-30 00:11:08</view></view>
    </view>

    <!-- 工单明细 -->
    <view class="content">
      <view class="top">
        <view class="title">工单明细</view>
        <view class="lie">
          <view class="">{{ record.typeEnum }}</view>
          <view class="">{{ record.machineModelNumber }}</view>
        </view>
      </view>
      <view class="list">
        <view class="">工单编号</view>
        <view class="">{{ record.id }}</view>
      </view>
      <view class="list">
        <view class="">实付款</view>
        <view class="">合计 ￥{{ record.partAmount + record.serveAmount }}</view>
      </view>

      <!-- 折叠部分 -->
      <view class="" v-if="seeAccounts">
        <view class="list">
          <view class="">支付方式</view>
          <view class="">支付宝</view>
        </view>
        <view class="list">
          <view class="">创建时间</view>
          <view class="">{{ record.createTime[0] }}/{{ record.createTime[1] }}/{{ record.createTime[2] }}/{{ record.createTime[3] }}:{{ record.createTime[4] }}</view>
        </view>
        <view class="list">
          <view class="">付款时间</view>
          <view class="">{{ record.updateTime[0] }}/{{ record.updateTime[1] }}/{{ record.updateTime[2] }}/{{ record.updateTime[3] }}:{{ record.updateTime[4] }}</view>
        </view>
        <view class="list">
          <view class="">维修员</view>
          <view class="">{{ record.maintainer.idName }}</view>
        </view>
      </view>

      <view class="extension" @click="accounts">
        <view class="">
          <text>{{ seeAccounts ? '收起' : '展开' }}</text>
          全部工单信息
        </view>
        <u-icon :name="arrow1" color="#ffffff" size="22"></u-icon>
      </view>
    </view>

    <!-- 配件使用 -->
    <view class="content">
      <view class="top">
        <view class="title">配件使用</view>
        <view class="lie">
          <view class="">配件列表</view>
          <view class="">总金额 ￥{{ allPrice || 0 }}</view>
        </view>
      </view>

      <view class="" v-show="!seeParts">
        <view class="list">
          <view class="">{{ priceArray[0]?.name }}</view>
          <view class="">￥{{ priceArray[0]?.price }}</view>
        </view>
        <view class="list">
          <view class="">{{ priceArray[1]?.name }}</view>
          <view class="">￥{{ priceArray[1]?.price }}</view>
        </view>
      </view>

      <!-- 折叠部分 -->
      <view class="" v-if="seeParts">
        <view class="list" v-for="(item, index) in priceArray" :key="index">
          <view class="">{{ item.name }}</view>
          <view class="">￥{{ item.price }}</view>
        </view>
      </view>
      <view class="extension" @click="parts">
        <view class="">
          <text>{{ seeParts ? '收起' : '展开' }}</text>
          全部配件信息
        </view>
        <u-icon :name="arrow2" color="#ffffff" size="22"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
import config from '@/config.js';
export default {
  data() {
    return {
      seeAccounts: false, //查看工单明细
      seeParts: false, //查看配件使用明细
      record: {},
      arrow1: 'arrow-down',
      arrow2: 'arrow-down',
      priceArray: [],
      OrderPart: {
        orderId: '',
        page: 1
      },
      orderId: '',
      allPrice: '',
      token: '',
      Part: {} //配件使用情况
    };
  },
  onLoad() {
    uni.$on('order', data => {
      this.record = JSON.parse(data);
      this.orderId = JSON.parse(data).id;
      this.token = uni.getStorageSync('token');
      this.getOrderPart();
    });
  },

  methods: {
    //配件数据
    getOrderPart() {
      let that = this;
      uni.request({
        url: `${config.baseURL}/orderPart/get/${that.orderId}/page/${that.OrderPart.page}`,
        header: {
          token: this.token
        },
        success(res) {
          that.Part = res.data.data;
          that.priceArray = that.Part.records.map(i => {
            return {
              price: i.amount * i.part.price,
              name: i.part.name
            };
          });
          that.allPrice = that.priceArray.reduce((sum, i) => {
            return sum + i.price;
          }, 0);

          // if (res.data.records.length === 0) {

          // }
        }
      });
    },

    //查看维修报告详情
    godetail(record) {
      uni.navigateTo({
        url: `/pages/orderReport/orderReport?reportId=${record.id}`
      });
    },
    //查看工单明细
    accounts() {
      this.seeAccounts = !this.seeAccounts;
      if (this.seeAccounts) {
        this.arrow1 = 'arrow-up';
      } else {
        this.arrow1 = 'arrow-down';
      }
    },
    //查看配件使用明细
    parts() {
      if (this.Part.records.length <= 2) {
        uni.showToast({
          title: '暂无更多相关数据',
          icon: 'error'
        });
        return;
      } else {
        this.seeParts = !this.seeParts;
        if (this.seeParts) {
          this.arrow2 = 'arrow-up';
        } else {
          this.arrow2 = 'arrow-down';
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  background-color: #333333;
}
.order_state_con {
  height: 100vh;
  padding-top: 20rpx;
  padding-left: 30rpx;
  background-color: #333333;
}
.content {
  background-color: #333333;
  color: #cecece;
  background: rgb(79, 79, 79);
  margin: 0 15px 5px 0px;
  display: flex;
  flex-direction: column;
  border-radius: 30rpx;
  border-left: 4rpx solid #ffb612;
  border-right: 4rpx solid #ffb612;
  padding: 10px;

  .top {
    color: #ffb612;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #ffb612;
    padding: 10px 0;

    .title {
      color: white;
      padding: 0 10px;
    }

    .lie {
      color: rgb(205, 205, 205);
      padding: 10px;
      font-size: 15px;
      display: flex;
      justify-content: space-between;
    }
  }

  .report-list {
    color: rgb(205, 205, 205);
    display: flex;
    justify-content: space-between;
    padding: 0 10px;

    .inspect {
      color: #ffb612;
    }
  }

  .report {
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
  }

  .list {
    color: rgb(205, 205, 205);
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }

  .extension {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }
}
</style>
